<template>
  <div class="products-view">
    <h1>产品页面</h1>
    <p>欢迎来到我们的产品展示页面。</p>
    <div class="products-grid">
      <div class="product-card" v-for="product in products" :key="product.id">
        <div class="product-image">📦</div>
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
        <div class="product-price">¥{{ product.price }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟产品数据
const products = ref([
  { id: 1, name: '产品一', description: '这是第一个产品的描述', price: 199 },
  { id: 2, name: '产品二', description: '这是第二个产品的描述', price: 299 },
  { id: 3, name: '产品三', description: '这是第三个产品的描述', price: 399 },
  { id: 4, name: '产品四', description: '这是第四个产品的描述', price: 499 },
]);
</script>

<style scoped>
.products-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.products-view h1 {
  margin-bottom: 20px;
  color: #333;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-image {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.product-card h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.product-card p {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 14px;
}

.product-price {
  font-weight: bold;
  color: #1677ff;
  font-size: 18px;
}
</style>